import React, { useEffect, useState } from 'react';
import { getFreeTimedata } from '../../api/mycourse'
import { Table } from 'antd';

const columns = [
    {
        title: '课程',
        dataIndex: 'courseTime',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'SUN',
        dataIndex: 'sunday',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'MON',
        dataIndex: 'monday',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'TUE',
        dataIndex: 'tuesday',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'WED',
        dataIndex: 'wednesday',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'THU',
        dataIndex: 'thursday',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'FRI',
        dataIndex: 'friday',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'SAT',
        dataIndex: 'saturday',
        render: (text) => <a>{text}</a>,
    },

];



const App = () => {

    const [freeTimeTable, setFreeTimeTable] = useState()
    useEffect(() => {
        getFreeTimedata({}).then(res => {
            console.log(res.data);
            setFreeTimeTable(res.data.data)
        })
    }, [])

    // 表头样式
    const headerStyle = {
        color:'red',
        width:'100%',
        textAlign:'center'
    }
    // 表尾样式
    const footerStyle = {
        color:'blue',
        width:'100%',
        textAlign:'end'
    }

    return (
        <div>
            {/* 表格 */}
            <Table
                columns={columns}
                dataSource={freeTimeTable}
                bordered
                title={() => <h1 style={headerStyle}>本周课表</h1>}
                footer={() => <p style={footerStyle}>*如果有教师需要调课，请通知教务老师*</p>}
            />

        </div>
    )
}
export default App;